<template>
    <div class="main-content"> 
      <!-- 移动端左侧三根线按钮，点击显示帮助菜单 -->
      <button type="button" id="menuTrigger" @click="toggleMenuBox">
        <img src="@/assets/image/menuTrigger.png" style="width: 28px;"/>
      </button>
      <!-- 左侧帮助导航栏 -->
      <div id="menuBox" :style="{ left: isMobile ? (menuBoxVisible ? '0' : '-100%') : 'auto' }">
        <h2>安装教程</h2>
        <!-- 为每个 item 添加点击事件 -->
        <item 
          v-for="(itemText, index) in menuItems" 
          :key="index"
          @click="selectItem(index)"
          :class="{ active: selectedItemIndex === index }">
          {{ itemText }}
        </item>

        <!-- 新增联系方式和二维码容器 -->
        <div class="contact-info">
          <div style="font-size: 15px;">联系我们</div>
          <div class="dashed-line"></div>
          <div style="margin-bottom: 5px;">
            <span class="text-item">微信：</span>
            <img src="@/assets/image/wexin.png"
              class="step-image-small">
          </div>          
          <div>
            <span style="font-size: 13px;">QQ群：</span>
            <a href="https://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=0lQVY-3PyuOj3iL1Jw9LMOmP18bXDX9K&authKey=UyVD4T8O7GJHmMD9xKZh%2BufUnb4eXTp2dMddJzjrcpQlPNpNhPqmpgPCqrHzAjgh&noverify=0&group_code=959455927"
                class="link" target="_blank">点击加入群聊</a>
          </div> 
          
          
        </div>
      </div>

      <!-- 右侧内容区，切换左侧导航显示不同内容 -->
      <div id="contentBox">        
        <ChromeOffline v-show="selectedItemIndex === 0"/>
        <ChromeOnline v-show="selectedItemIndex === 1"/>
        <EdgeOnline v-show="selectedItemIndex === 2"/>
        <EdgeOffline v-show="selectedItemIndex === 3"/>
        <FirefoxOnline v-show="selectedItemIndex === 4"/>
        <Chrome360 v-show="selectedItemIndex === 5"/>
        <QQOffline v-show="selectedItemIndex === 6"/>
        <Wallpaper v-show="selectedItemIndex === 7"/>
        <Contactus v-show="selectedItemIndex === 8"/>
      </div>
    </div>
  </template>
  
<script setup lang="ts">
import { ref,onMounted } from 'vue';
import ChromeOnline from './ChromeOnline.vue';
import ChromeOffline from './ChromeOffline.vue';
import EdgeOnline from './EdgeOnline.vue';
import EdgeOffline from './EdgeOffline.vue';
import FirefoxOnline from './FirefoxOnline.vue';
import Chrome360 from './Chrome360.vue';
import QQOffline from './QQOffline.vue';
import Contactus from './Contactus.vue';
import Wallpaper from './Wallpaper.vue';

  // 定义菜单项数组
  const menuItems = [
    'Chrome 离线安装',
    'Chrome 在线安装（需要梯子）',
    'Edge 在线安装',
    'Edge 离线安装',
    'Firefox 在线安装',
    // '360 在线安装',
    '360极速浏览器(X) 离线安装',
    'QQ浏览器 离线安装',
    // 'Mac safari安装',
    // 'iPhone safari安装',
    'WallpaperEngine（mpkg转mp4）',
    // '联系我们'
  ];
  // 定义当前选中项的索引，默认为第1个
  const selectedItemIndex = ref(0);
  // 点击 item 时触发的函数
  const selectItem = (index: number) => {
    selectedItemIndex.value = index;
  };

  // 控制 menuBox 显示和隐藏的变量
  const menuBoxVisible = ref(true);

  // 点击 menuTrigger 时触发的函数
  const toggleMenuBox = () => {
      menuBoxVisible.value = !menuBoxVisible.value;
  };

  const isMobile = ref(window.innerWidth < 1024);
  // 监听窗口大小变化
  const handleResize = () => {
      isMobile.value = window.innerWidth < 1024;
      if (!isMobile.value) {
        // 如果切换到 PC 大屏，强制显示 menuBox
        menuBoxVisible.value = true;
      }else{
        menuBoxVisible.value=false;
      }
  };

  onMounted(() => {
      window.addEventListener('resize', handleResize);
  });
</script>
  
  <style scoped>
  .main-content {
    position: relative;
    display: flex;
    flex: 1 1 0;
    /* 这意味着元素会根据可用空间进行伸缩，
    其 flex-grow 属性为 1，表示元素会在主轴方向上尽可能地扩展；
    flex-shrink 属性为 1，表示元素在空间不足时会收缩；
    flex-basis 属性为 0，表示元素初始大小为 0，会根据剩余空间进行分配 */
    justify-content: space-between;
    overflow: hidden;
}
 /* 小屏幕样式（宽度小于 1024px） */
@media (max-width: 1023px) {
  .main-content {
    padding-top: 2.5rem;
  }
}

#menuTrigger {
  position: absolute;
  left: 1.25rem;
  top: 0;
  display: flex;
  height: 32px;
  width: 32px;
  align-items: center;
  cursor: pointer;
  background-color: transparent;
  border: none;
}

/* 电脑屏幕尺寸下隐藏按钮 */
@media (min-width: 1024px) {
  #menuTrigger {
    display: none;
  }
}

/* 基础样式 */
#menuBox {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  color: white;
  transition: all 0.3s ease; 
  
}
/* 大屏幕样式（pc） */
@media (min-width: 1024px) {
    #menuBox {
        margin-left: 12rem; 
    }
}
/* 小屏幕样式（m） */
@media (max-width: 1023px) {
    #menuBox {
        position: absolute;
        background-color: #64748b; 
        left: -100%;
        padding: 10px;
        height: 80%;        
    }
}
/* h2 样式 */
#menuBox h2 {
    margin-bottom: 0.5rem;
    font-size: 1.25rem; 
    line-height: 1.75rem;
    font-weight: bold;
}
/* item 基础样式 */
#menuBox item {
    margin-bottom: 0.75rem; 
    margin-left: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 1.2rem;
    line-height: 1.75rem;
    cursor: pointer;
}

/* 第一个 item 标签的特殊样式 */
/* #menuBox item:first-of-type {
    border-radius: 0.375rem; 
    background-color: white;
    color: #777aa8;
} */

/* 其他 item 标签的悬停样式 */
/* #menuBox item:not(:first-of-type):hover {
    border-radius: 0.375rem;
    background-color: #ffffff80;
    color: #777aa8;
} */

/* 选中 item 的样式，与 item:first-of-type 样式相同 */
#menuBox item.active {
    border-radius: 0.375rem; 
    background-color: white;
    color: #777aa8;
}

/* 其他 item 标签的悬停样式 */
#menuBox item:not(.active):hover {
    border-radius: 0.375rem;
    background-color: #ffffff80;
    color: #777aa8;
}

/* 外层容器样式 */
#contentBox {
    display: flex;
    flex: 1;
    justify-content: center;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 15px;
    color: white;
}

/* 小屏幕样式 */
@media (max-width: 1023px) {
  #contentBox {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}
/* 修改滚动条的样式 */
/* WebKit 浏览器（Chrome、Safari 等） */
#contentBox::-webkit-scrollbar {
    width: 8px; /* 垂直滚动条宽度 */
    height: 8px; /* 水平滚动条高度 */
}
#contentBox::-webkit-scrollbar-track {
    background-color: transparent; /* 滚动条轨道背景透明 */
}

#contentBox::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3); /* 滚动条滑块半透明 */
    border-radius: 4px; /* 滚动条滑块圆角 */
}

#contentBox::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.5); /* 鼠标悬停时滚动条滑块颜色加深 */
}

/* 联系方式和二维码容器样式 */
.contact-info {
  position: absolute;
  bottom: 30px;   
  left: 12rem; 
}
@media (max-width: 1023px) {
  .contact-info {
    left: 1.25rem;
    bottom: 10px; 
    }
}

.contact-info img {
  width: 100px; 
  height: auto; 
  margin-top: 2px;   
}
.text-item {  
    vertical-align: top; 
    line-height: normal; 
    font-size: 14px;
}
/* 链接样式 */
.link {   
    text-decoration: none;
    color: white;
    font-size: 15px;
}
.link:hover{
    color: #60a5fa;
}
.dashed-line {
  border-bottom: 1px solid #fff; 
  height: 10px;
  margin-bottom: 10px;
}
</style>